<template>
	<view class="content">
		<view class="jine">
			<view class="time" @click="show = true">
				<text>{{ time }}</text>
				<u-icon name="arrow-down-fill" color="#B9B5B5" size="18"></u-icon>
			</view>
			<view class="price">
				合计: {{ total_price }}元
			</view>
		</view>
		<view class="log-list" v-if="logList.length > 0">
			<view class="log-li" v-for="(item,index) in logList" :key='index'>
				<view class="log-li-l">
					<image src="../../../../static/price.png" mode=""></image>
					<view class="log-info">
						<view class="name">{{ item.goods_title }}</view>
						<view class="des">{{ item.createtime }}</view>
					</view>
				</view>
				<view class="log-li-price">
					{{ item.goods_price }}
				</view>
			</view>
		</view>
		<view v-else style="margin-top: 20vh;">
			<u-empty text="暂无记录" mode="data"></u-empty>
		</view>
		<u-picker mode="time" v-model="show" :params="params"
		:default-time="time"
		@confirm="confirm"
		></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				logList:[],
				total_price:0.00,
				time:'',
				show:false,
				params: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
			}
		},
		onLoad() {
			
			this.time = this.$u.timeFormat(new Date().getTime(), 'yyyy-mm')
			this.getBuyLog()
		},
		methods: {
			// 获取购买记录
			getBuyLog(){
				uni.$u.http.post('order/buy_list',{
					query_date:this.time
				}).then(res =>{
					console.log(res)
					this.logList = res.data.list
					this.total_price = res.data.total_price
				}).catch(err =>{
					this.logList = []
					this.total_price = 0
				})
			},
			confirm(e){
				console.log(e)
				this.time = e.year+'-'+e.month
				this.getBuyLog()
			}
		}
	}
</script>

<style lang="less">
.content{
	padding: 0 20rpx;
}
.jine{
	display: flex;
	align-items: center;
	justify-content: space-between;
	.time{
		font-size: 24rpx;
		color: #7C7C7C;
		text{
			margin-right: 10rpx;
		}
	}
	.price{
		font-size: 24rpx;
		color: #7C7C7C;
	}
	height: 70rpx;
}
.log-list{
	.log-li{
		width: 100%;
		height: 126rpx;
		background: #fff;
		border-radius: 10rpx;
		padding: 0 17rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;
		image{
			width: 40rpx;
			height: 40rpx;
			margin-right: 18rpx;
		}
		.log-li-l{
			display: flex;
			align-items: center;
			.name{
				font-size: 28rpx;
				margin-bottom: 11rpx;
				font-weight: bold;
			}
			.des{
				font-size: 24rpx;
				color: #7C7C7C;
			}
		}
		.log-li-price{
			font-size: 40rpx;
			color: #FBAA27;
			padding-right: 12rpx;
		}
	}
}
</style>
